<template>
  <div class="progress">
    <span class="progress-position"
          :style="{width: percentage + '%',backgroundColor: color}"></span>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  props: {
    percentage: {
      type: String,
      default: 0
    },
    color: {
      type: String,
      default: 'pink'
    }
  },
  created () { console.log(this.percentage); },
  methods: {}
}

</script>
<style lang='scss' scoped>
.progress {
  width: 100px;
  position: relative;
  background-color: #eeeeee;
  height: 0.15rem;
  border-radius: 1rem;
  .progress-position {
    position: absolute;
    background-color: pink;
    height: 100%;
    border-radius: 1rem;
  }
}
</style>